<template>


  <ell-tree
  style="margin-left:100px;margin-top:100px"
  :props="props"
  :load="loadNode"
  lazy
  @check-change="handleCheckChange">
</ell-tree>

</template>

<script>

import EllTree from "./components/tree.vue";
  export default {
     components: {
      EllTree
    },
    data() {
      return {
        props: {
          label: 'name',
          children: 'zones'
        },
        count: 1
      };
    },
    methods: {
      handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
      },
      handleNodeClick(data) {
        console.log(data);
      },
      loadNode(node, resolve) {
         console.log('/////');
         console.log(node);
         console.log('/////');
        if (node.level === 0) {
          return resolve([{ name: 'region1' }, { name: 'region2' }]);
        }
        if (node.level > 3) return resolve([]);

        // var hasChild;
        // if (node.data.name === 'region1') {
        //   hasChild = true;
        // } else if (node.data.name === 'region2') {
        //   hasChild = false;
        // } else {
        //   hasChild = Math.random() > 0.5;
        // }

        setTimeout(() => {
          var data;
          // if (hasChild) {
            data = [{
              name: 'zone' + this.count++
            }, {
              name: 'zone' + this.count++
            }];
          // } else {
          //   data = [];
          // }
          resolve(data);

        }, 500);
      }

    }
  };
</script>